V-for指令的高級用法

• 使用v-for對清單進行迴圈著色後，實際上就實現了對資料物件的綁定，當我們呼叫以下這些函數對清單資料物件進行更新時，視圖也會對應地更新：

push()      //向清單尾部追加一個元素
pop()       //刪除清單尾部的元素
unshift()   //向清單標頭插入一個元素
shift()     //刪除清單標頭的元素
splice()    //對清單進行分割操作
sort()      //對清單進行排序操作
reverse()   //對清單進行反向操作

• 首先在頁面上新增一個按鈕來演示清單反向操作：

<button @click="click">
    反向
</button>

• 並定義Vue函數：

methods: {
    click(){
        this.list.reverse()
    }
}

• 執行這段程式後，當點擊頁面上的反向按鈕時，清單元素的著色順序會進行正逆切換。當我們對整個清單都替換時，可以直接將清單變數重新賦值就好。
• 在實際開發的時候，通常不會讓原始的清單資料著色到頁面，v-for指令支援在著色前對資料進行額外的處理，可以新增以下標籤：

<ul>
    <li v-for="(item,index) in handle(list)">
        <div>{{index + "." + item.name}}</div>
        <div>{{item.num}}</div>
    </li>
</ul>

• handle是定義的處理函數，在著色前，會透過該函數對清單資料進行處理，例如可以使用篩檢程式來進行清單資料的過濾著色：

handle(1){
    return 1.filter(obj => obj.name !="A")
}

• 若是要同時迴圈著色多個元素時，與v-if指令相似，最常使用的方式是用template標籤來包裝：

<template v-for="(item,index) in handle(list)">
    <div>{{index + "." + item.name}}</div>
    <div>{{item.num}}</div>
</template>

今天介紹的v-for高級用法就先到這邊，明天將會介紹更多有趣的內容！